<template>
	<view class="tabbar">
		<view class="tabbarContent">
			<u-tabs :list="list1" lineColor="#d9519d" :inactiveStyle="inactiveStyle" :activeStyle="activeStyle" :current="currentIndex?currentIndex:0"
				@click="bindAvtive"></u-tabs>
		</view>

	</view>
</template>

<script>
	export default {
		props:['currentIndex'],
		data() {
			return {
				activeStyle: {
					color: '#fff',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: "#ffffffcc",
					fontWeight: '400',
				},
				list1: [
					{
					name: '所有歌曲',
				  },
				  {
				 	name: '播放列表',
				  },
				  // {
				 	// name: '推荐',
				  // },
				  {
				 	name: '专辑',
				  },
				  {
				 	name: '艺术家',
				  },
				  {
				 	name: '音乐流派',
				  },
			    ]
			}
		},
		methods: {
			bindAvtive(item) {
				this.$emit('currentChange', item.index);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		width: 100%;
		margin: 0 auto;
		position: sticky;
		background-color: $app-bgc-color;
		top: 120rpx;
		// #ifdef APP-PLUS
		top: 180rpx;
		//#endif
		left: 0;
		z-index: 9;
		.tabbarContent {
			width: 95%;
			margin: 0 auto;
			// background-color: red;
		}

	}
</style>